<template>
    <!-- 固有属性 -->
    <p><input type="text" :placeholder="username" /></p>
    <p><input type="password" :placeholder="password" /></p>
    <a :href="url">百度首页</a>
    <div :class="{ active: isActive }"> 绑定calss属性</div>
    <div :style="{ color: textColor, fontSize: fontSize + 'px' }"> 对象语法绑定样式</div>
    <div :style="[style1, style2]">数组绑定样式</div>

</template>
<!-- 5s以后style样式进行改变 数组  背景颜色 blue padding不变 color yellow  border 1px solid orange -->
<script setup>
import { ref } from 'vue';
let username = ref("请输入用户名");
const password = "请输入密码";
const url = 'https://www.baidu.com';
let isActive = ref(false);
const textColor = "blue";
const fontSize = 30;
let style1 = {
    backgroundColor: "yellow",
    padding: "30px"
}
let style2 = {
    color: "blue",
    border: "1px solid #ddd"
}

setTimeout(() => {
    username.value = "请再次输入用户名";
    isActive.value = true;
    style1 = {
        backgroundColor: "blue",
        padding: "30px"
    }
    style2 = {
        color: "yellow",
        border: "1px solid orange"
    }

}, 1000)
</script>
<style scoped>
.active {
    color: red;

}
</style>